<template>
    <view class="s-progress_circle" :style="li_style">
        <view class="s-progress_circle_li right" :style="li_style">
			<view :class="right>0?'act':''" :style="li_view"></view>
		</view>
        <view class="s-progress_circle_li left" :style="li_style">
			<view :class="left>0?'act':''" :style="li_view"></view>
		</view>
        <view class="s-progress_circle_content" :style="{'--size':li_c_w,'--fsize':n_fzise,'--color':fcolor}">
            <slot>{{n_value}}%</slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 's-progress-circle',
    props:{
        size: { type: Number, default: 100 },//圆环外框宽度
        fsize: { type: Number, default: 30 },//文字字号
		fcolor: { type: String, default: '#333' },//文字颜色
        borderWidth: { type: Number, default: 5 },//圆环宽度，内边距
        percent: { type: Number, default: 0 },//进度条，百分比
        activeColor: { type: String, default: '#3bc138' },//激活颜色
        defaultColor: { type: String, default: '#e7e7e7' },//底层颜色
        duration: { type: Number, default: 1 }, //环绕一周所花的时间
    },
    computed:{
        left(){
            let val = this.n_value / 100 * 360 + 45
            return val > 225 ? val - 180 : 0;
        },
        right(){
            let val = this.n_value / 100 * 360 + 45
            return val >= 225 ? 225 : val;
        },
		n_value(){ return this.percent >= 100 ? 100 : this.percent;},
		n_zise(){ return uni.upx2px(parseInt(this.size) || 100)+'px'; },
		n_fzise(){ return uni.upx2px(parseInt(this.fsize) || 30)+'px'; },
		n_border_w() { return uni.upx2px(parseInt(this.borderWidth) || 5)+'px'; },
		li_c_w() { return uni.upx2px(parseInt(this.size - this.borderWidth*2))+'px'; },
		li_style() { return {'--size':this.n_zise}; },
		li_view() { return {
			'--border-width': this.n_border_w,
			'--progress-right': this.right + 'deg',
			'--progress-left': this.left + 'deg',
			'--default-color': this.defaultColor,
			'--active-color': this.activeColor,
			'--duration': this.duration / 2 + 's',
		}; },
    },
};
</script>

<style lang="scss" scoped>
@import "../../libs/style/conmon.scss";
.s-progress{
	
}

</style>